<template>
  <div class="dashboard-container" id="exportBox">
    <el-form ref="queryForm"  :model="queryParams" label-width="100px">
      <el-form-item label="查询sql">
        <el-input v-model="queryParams.sql" type="textarea" style="width: 80%"  :autosize="{ minRows: 5, maxRows: 20}">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      style="width: 100%"
      :data="tableData"
      :header-cell-style="{'background-color': 'rgb(103, 194, 58)','color': 'rgb(0, 0, 0)','border': '1px rgb(f, f, f) solid'}"
      :cell-style="{'background-color': '#fff','color': 'rgb(fff, fff, fff)','border': '1px rgb(103, 194, 58) solid'}"
    >
      <el-table-column v-for="name in tableTitles"
        fixed
        :prop="name"
        :label="name"
        :show-overflow-tooltip="true">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import htmlDocx from 'html-docx-js/dist/html-docx'
  import saverFile from 'file-saver'
  export default {
  name: 'sql',
  props: {},
  data() {
    return {
      allDomObj:null,
      tableData: [],
      tableTitles:[],
      dataSourceOptions:[],
      // 查询参数
      queryParams: {
        sql: null
      },
    }
  },
  methods: {
    exportWord() {
      let htmls = document.getElementById("exportBox");//获取需要导出的标签
      this.allDomObj = htmls.cloneNode(true);
      this.loadTable();//处理表单
      this.exec(this.allDomObj.innerHTML.toString()); // 导出的方法
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams = this.$options.data().queryParams
      this.handleQuery()
    },

    loadTable() {
      // 获取页面上的table
      let tableList = this.allDomObj.getElementsByClassName("el-table");
      for (let i = 0; i < tableList.length; i++) {
        var item = tableList[i];
        let header = item.getElementsByClassName("el-table__header");
        header[0].style.width = '600px'
        var headerTr = header[0].getElementsByTagName("tr");//获取到header 的tr标签

        let body = item.getElementsByClassName("el-table__body");
        body[0].style.width = '600px'

        var tbody = body[0].getElementsByTagName("tbody");

        tbody[0].insertBefore(headerTr[0], tbody[0].firstElementChild);//header的tr标签放到body的第一个子节点上
      }
    },

    exec(htmls) {
      let page =
        `<!DOCTYPE html>
              <html lang="en">
                <head>
                  <meta charset="utf-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width,initial-scale=1.0">
                  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
                  <title><%= htmlWebpackPlugin.options.title %></title>
                </head>
                <body>
                  <div id="app"> ` + htmls + ` </div>
                </body>
            </html>
            `;
      let converted = htmlDocx.asBlob(page);
      saverFile(converted, this.queryParams.sql + ".docx");
    },

    getList(){
      let params = this.queryParams;
      this.$store.dispatch('user/sql', params).then((res) => {
        console.log("user/sql==================", res)
        if(res.status === 200){
          if(res.data.length > 0){
            this.tableTitles = Object.keys(res.data[0]);
            console.log(this.tableTitles);
          }
          this.tableData = res.data;
          console.log(this.tableData)
        }else {
          this.tableData = [];
        }
      })
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    /*margin: 30px;*/
    height: 100%;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.footer{
  width: 100%;
  text-align: right;
  padding-top: 15px;
}

.el-table>>> .warning-row th {
  background: rgb(240,240,240)!important
}

.el-table>>> .success-row th {
  background: #edf6fb!important;
}

</style>
